<template>
  <div class="todo-container">
    <div class="todo-wrap">
<!--      <TodoHeader :addTodo="addTodo"/>-->
      <TodoHeader @addTodo="addTodo"/> <!--定义事件 推荐使用，但不能逐级传递-->
<!--      <TodoHeader ref="header"/> 不太推荐-->
<!--      <TodoList :todos="todos" :deleteTodo="deleteTodo"/>-->
      <TodoList :todos="todos"/> <!-- 使用pubsub可以实现任意跨度的调用 -->
<!--      <todo-footer :deleteAllCompletedTodos="deleteAllCompletedTodos" :selectAllTodos="selectAllTodos" :todos="todos"/>  &lt;!&ndash; 可以使用todo-footer命名方式 &ndash;&gt;-->

      <todo-footer :selectAllTodos="selectAllTodos" :todos="todos">
        <button class="btn btn-danger" @click="deleteAllCompletedTodos" slot="completed">清除已完成任务</button> <!-- 父类使用slot来对应子类的slot，传入整个标签注意deleteAllCompletedTodos要在当前组件中定义 -->
      </todo-footer>

    </div>
  </div>
</template>

<script>


import TodoHeader from './components/TodoHeader'
import TodoList from './components/TodoList'
import TodoFooter from './components/TodoFooter'
import PubSub from 'pubsub-js'
import storageUtil from './util/storageUtil'


export default {
  name: 'App',
  data () {
   return {
     // todos: [
     //   {
     //     title: '吃饭',
     //     complete: false
     //   },
     //   {
     //     title: '睡觉',
     //     complete: false
     //   },
     //   {
     //     title: '炒股',
     //     complete: true
     //   }
     // ]
     // todos: JSON.parse(window.localStorage.getItem('todos_key') || '[]') // 如果解析为null，则返回'[]'注意是字符串
     todos: storageUtil.getTodo()// 直接调用工具类方法
   }
  },
  components: {
    TodoHeader,
    TodoList,
    TodoFooter
  },
  // mounted () { // 自定义事件，不太推荐该方法，异步操作
  //   this.$refs.header.$on('addTodo', this.addTodo)
  // },
  mounted () {

    // 消息订阅=绑定事件监听
    // 消息发布=事件触发
    PubSub.subscribe('deleteTodo', (msg, index) => {
      this.deleteTodo(index)// 使用 => 函数可以在此处直接使用this，该this可以向上找到对应的组件对象
    })

  },
  methods: {
    addTodo (todo) {// 添加待办事项
      this.todos.unshift(todo)
    },
    deleteTodo (index) {// 添加待办事项
      this.todos.splice(index, 1)
    },
    deleteAllCompletedTodos () {
      this.todos = this.todos.filter(todo => !todo.complete)// 保留未完成的todo
    },
    selectAllTodos (check) {// 接受用户全选非全选
      this.todos.forEach(todo => todo.complete = check)
    }
  },
  watch: {
    todos: {// 对todos深度监视，只要其中的数据发生变化便存入localStorage中
      deep: true,
      // handler (newVal) {
      //   // window.localStorage.setItem('todos_key', JSON.stringify(newVal))
      //   storageUtil.setTodo(newVal) // 其中一个方式
      // }
      handler: storageUtil.setTodo // 直接调用工具类方法
    }
  }
}
</script>

<style>
  /*app*/
  .todo-container {
    width: 600px;
    margin: 0 auto;
  }
  .todo-container .todo-wrap {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }

</style>
